<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>显示数据列表</title>
    <style type="text/css">
        table {
            border-collapse: collapse;
            margin: 0px auto 0px auto;
        }
        table th,td {
            border: 1px solid black;
            text-align: center;
        }
    </style>
</head>
<body>

    <table id="dataTable">
        <tr>
            <th>ID</th>
            <th>NAME</th>
            <th>PRICE</th>
            <th>DELETE</th>
            <th>EDIT</th>
        </tr>
        <tbody th:if="${#lists.isEmpty(movieList)}">
            <tr>
                <td colspan="5">抱歉！没有查询到您需要的数据！</td>
            </tr>
            <tr>
                <td colspan="5">
                    <a th:href="@{/movie/add/page}">添加新数据</a>
                </td>
            </tr>
        </tbody>
        <tbody th:if="${not #lists.isEmpty(movieList)}">
            <tr th:each="movie : ${movieList}">
                <td th:text="${movie.movieId}"></td>
                <td th:text="${movie.movieName}"></td>
                <td th:text="${movie.moviePrice}"></td>
                <td>
                    <a @click="anchorClick" th:href="@{/movie/}+${movie.movieId}">删除</a>
                </td>
                <td>
                    <a th:href="@{/movie/}+${movie.movieId}">编辑</a>
                </td>
            </tr>
            <tr>
                <td colspan="5">
                    <a th:href="@{/movie/add/page}">添加新数据</a>
                </td>
            </tr>
        </tbody>
    </table>

    <!-- 负责将 GET 请求转换为 POST 请求的表单 -->
    <form id="convertForm" method="post">
        <input type="hidden" name="_method" value="DELETE" />
    </form>

</body>
<script type="text/javascript" th:src="@{/script/vue.js}"></script>
<script type="text/javascript">

    new Vue({
        "el":"#dataTable",
        "methods":{

            // 点击超链接的单击响应函数
            "anchorClick":function () {

                // 根据 id 获取负责转换请求方式的表单
                var formEle = document.getElementById("convertForm");

                // 用当前点击的超链接的 href 属性赋值给表单的 action 属性，
                // 这样将来提交表单访问的地址就是超链接原本要访问的地址
                formEle.action = event.target.href;

                // 提交表单
                formEle.submit();

                // 阻止超链接的默认行为
                event.preventDefault();

            }
        }
    });

</script>
</html>